class UIAssetGenerator {
    constructor() {
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d');
    }

    // 生成按钮
    generateButton(width = 200, height = 50, text = "按钮", color = "#4CAF50") {
        this.canvas.width = width;
        this.canvas.height = height;
        
        // 清除画布
        this.ctx.clearRect(0, 0, width, height);
        
        // 绘制按钮背景
        this.ctx.fillStyle = color;
        this.ctx.fillRect(0, 0, width, height);
        
        // 绘制边框
        this.ctx.strokeStyle = "#2E7D32";
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(1, 1, width - 2, height - 2);
        
        // 绘制高光效果
        this.ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
        this.ctx.fillRect(2, 2, width - 4, height / 2 - 2);
        
        // 绘制文字
        this.ctx.fillStyle = "#FFFFFF";
        this.ctx.font = "bold 16px Arial";
        this.ctx.textAlign = "center";
        this.ctx.textBaseline = "middle";
        this.ctx.fillText(text, width / 2, height / 2);
        
        return this.canvas.toDataURL();
    }

    // 生成升级选项卡片
    generateUpgradeCard(width = 300, height = 100, title = "升级", description = "描述") {
        this.canvas.width = width;
        this.canvas.height = height;
        
        // 清除画布
        this.ctx.clearRect(0, 0, width, height);
        
        // 绘制卡片背景
        this.ctx.fillStyle = "#2C3E50";
        this.ctx.fillRect(0, 0, width, height);
        
        // 绘制边框
        this.ctx.strokeStyle = "#34495E";
        this.ctx.lineWidth = 3;
        this.ctx.strokeRect(2, 2, width - 4, height - 4);
        
        // 绘制标题
        this.ctx.fillStyle = "#ECF0F1";
        this.ctx.font = "bold 18px Arial";
        this.ctx.textAlign = "left";
        this.ctx.textBaseline = "top";
        this.ctx.fillText(title, 15, 15);
        
        // 绘制描述
        this.ctx.fillStyle = "#BDC3C7";
        this.ctx.font = "14px Arial";
        this.ctx.fillText(description, 15, 45);
        
        return this.canvas.toDataURL();
    }

    // 生成进度条
    generateProgressBar(width = 200, height = 20, progress = 0.5) {
        this.canvas.width = width;
        this.canvas.height = height;
        
        // 清除画布
        this.ctx.clearRect(0, 0, width, height);
        
        // 绘制背景
        this.ctx.fillStyle = "#34495E";
        this.ctx.fillRect(0, 0, width, height);
        
        // 绘制进度
        this.ctx.fillStyle = "#E74C3C";
        this.ctx.fillRect(2, 2, (width - 4) * progress, height - 4);
        
        // 绘制边框
        this.ctx.strokeStyle = "#2C3E50";
        this.ctx.lineWidth = 1;
        this.ctx.strokeRect(0, 0, width, height);
        
        return this.canvas.toDataURL();
    }

    // 生成图标
    generateIcon(size = 32, type = "weapon") {
        this.canvas.width = size;
        this.canvas.height = size;
        
        // 清除画布
        this.ctx.clearRect(0, 0, size, size);
        
        switch(type) {
            case "weapon":
                this.generateWeaponIcon(size);
                break;
            case "health":
                this.generateHealthIcon(size);
                break;
            case "shield":
                this.generateShieldIcon(size);
                break;
            case "experience":
                this.generateExperienceIcon(size);
                break;
            default:
                this.generateWeaponIcon(size);
        }
        
        return this.canvas.toDataURL();
    }

    // 生成武器图标
    generateWeaponIcon(size) {
        // 绘制武器图标（剑的形状）
        this.ctx.fillStyle = "#95A5A6";
        this.ctx.fillRect(size * 0.4, size * 0.2, size * 0.2, size * 0.6);
        this.ctx.fillRect(size * 0.3, size * 0.3, size * 0.4, size * 0.1);
        this.ctx.fillRect(size * 0.35, size * 0.1, size * 0.1, size * 0.2);
    }

    // 生成生命值图标
    generateHealthIcon(size) {
        // 绘制心形
        this.ctx.fillStyle = "#E74C3C";
        this.ctx.beginPath();
        this.ctx.moveTo(size * 0.5, size * 0.8);
        this.ctx.bezierCurveTo(size * 0.5, size * 0.6, size * 0.2, size * 0.4, size * 0.2, size * 0.6);
        this.ctx.bezierCurveTo(size * 0.2, size * 0.8, size * 0.5, size * 0.8, size * 0.5, size * 0.8);
        this.ctx.bezierCurveTo(size * 0.5, size * 0.8, size * 0.8, size * 0.8, size * 0.8, size * 0.6);
        this.ctx.bezierCurveTo(size * 0.8, size * 0.4, size * 0.5, size * 0.6, size * 0.5, size * 0.8);
        this.ctx.fill();
    }

    // 生成护盾图标
    generateShieldIcon(size) {
        // 绘制盾牌形状
        this.ctx.fillStyle = "#3498DB";
        this.ctx.beginPath();
        this.ctx.moveTo(size * 0.5, size * 0.1);
        this.ctx.lineTo(size * 0.8, size * 0.3);
        this.ctx.lineTo(size * 0.8, size * 0.7);
        this.ctx.lineTo(size * 0.5, size * 0.9);
        this.ctx.lineTo(size * 0.2, size * 0.7);
        this.ctx.lineTo(size * 0.2, size * 0.3);
        this.ctx.closePath();
        this.ctx.fill();
    }

    // 生成经验值图标
    generateExperienceIcon(size) {
        // 绘制星星形状
        this.ctx.fillStyle = "#F1C40F";
        this.ctx.beginPath();
        for (let i = 0; i < 5; i++) {
            const angle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
            const x = size * 0.5 + Math.cos(angle) * size * 0.4;
            const y = size * 0.5 + Math.sin(angle) * size * 0.4;
            if (i === 0) {
                this.ctx.moveTo(x, y);
            } else {
                this.ctx.lineTo(x, y);
            }
        }
        this.ctx.closePath();
        this.ctx.fill();
    }

    // 生成所有UI素材
    generateAllUIAssets() {
        const assets = {};
        
        // 生成按钮
        assets.button = this.generateButton();
        assets.buttonUpgrade = this.generateButton(200, 50, "升级", "#E67E22");
        assets.buttonPause = this.generateButton(200, 50, "暂停", "#9B59B6");
        
        // 生成升级卡片
        assets.upgradeCard = this.generateUpgradeCard();
        assets.upgradeCardWeapon = this.generateUpgradeCard(300, 100, "武器升级", "增加武器伤害");
        assets.upgradeCardSpeed = this.generateUpgradeCard(300, 100, "速度升级", "增加移动速度");
        
        // 生成进度条
        assets.progressBar = this.generateProgressBar();
        assets.progressBarRed = this.generateProgressBar(200, 20, 0.3);
        assets.progressBarGreen = this.generateProgressBar(200, 20, 0.7);
        
        // 生成图标
        assets.iconWeapon = this.generateIcon(32, "weapon");
        assets.iconHealth = this.generateIcon(32, "health");
        assets.iconShield = this.generateIcon(32, "shield");
        assets.iconExperience = this.generateIcon(32, "experience");
        
        return assets;
    }
}

// 导出到全局
window.UIAssetGenerator = UIAssetGenerator; 